<template>
  <a-modal
    title="不含税采购价浮动分析"
    width="80%"
    :visible="visible"
		destroyOnClose
    :confirmLoading="confirmLoading"
    :footer="null"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form" layout="inline">
        <a-row :gutter="48">

          <a-col :md="8" :sm="24">
           <a-form-item  label="时间">
                  <a-select
                      v-model="years"
                      size="small"
                      placeholder="请选择年份"
                      style="width: 200px"
											@change="handleChangeYear"
                  >
                      <a-select-option 
												:disabled='item.disable' 
												:value="item.value" 
												v-for="item in yearList" 
												:key="item.value"
											>
                          {{ item.label }}
                      </a-select-option>
                  </a-select>
              </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleSubmit">查询</a-button>
<!--              <a-button style="margin-left: 8px" @click="buildCharts">重置</a-button>-->
            </span>
          </a-col>

        </a-row>
      </a-form>

      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div ref="charts" id="main" style="width: 100%;height:400px;"></div>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  floatData,   //物料使用情况
} from '@/api/modular/main/emsmaterial/emsMaterialManage'

export default {
  data() {
    return {
			resData: [],
      labelCol: {
        xs: {span: 24},
        sm: {span: 8}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15}
      },
      labelColBlock: {
        xs: {span: 24},
        sm: {span: 4}
      },
      wrapperColBlock: {
        xs: {span: 24},
        sm: {span: 18}
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      queryParam: {},
      years:[],
			yearList:[],
      record: {},
    }
  },
  methods: {
    show(record) {
			this.yearList = this.createYearList()
      console.log(record)
      this.visible = true
      this.record = record
      this.years=[String(new Date().getFullYear())]
      this.handleSubmit()
    },
    handleSubmit() {
			floatData({
				materialId: this.record.materialId,
				times: this.years
			}).then(res => {
				this.buildCharts(res.data)
			})
    },
		handleChangeYear(e){
			this.years = [e]
		},
    handleCancel() {
      this.visible = false
      this.years=[]
    },
    buildCharts(result) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'))
			  // 处理数据之后获取x轴和y轴数据
				let xData = []
				let yData = {
					purchasePrice: [],
					costPrice: [],
				}
				// 横纵坐标数据
				result[0].month.forEach((item, index) => {
					if(item.materialPriceVos&&item.materialPriceVos.length>0){
						item.materialPriceVos.forEach((innerItem, innerIndex)=>{
							xData.push(`${item.month}月-${innerIndex+1}次`)  //横坐标
							yData.purchasePrice.push(innerItem.purchasePrice)  //纵坐标采购价
							yData.costPrice.push(innerItem.costPrice)  //纵坐标成本价
						})
					}else{
						xData.push(`${item.month}月`)
						yData.purchasePrice.push(0)  //纵坐标采购价
						yData.costPrice.push(0)  //纵坐标成本价
					}
				})
        // 指定图表的配置项和数据
       let option = {
        legend: {type: "plain"},
					xAxis: {
						data: xData
					},
					yAxis: {
						name: '金额/元'
					},
					tooltip: {
						trigger: "axis"
					},
					series: [
						{
							name: '采购价',
							type: 'line',
							color:'#241b2f',
							prop: 'discountingOne',
							data: yData.purchasePrice
						},
						{
							name: '成本价',
							type: 'line',
							color:'#4888df',
							prop: 'discountingTwo',
							data: yData.costPrice
						},
					],
      }





        // 使用刚指定的配置项和数据显示图表。
       	option && myChart.setOption(option, true)
				// ***********随着浏览器大小调节图表***********   <-重点在此
				window.onresize = () => {
					// console.log('浏览器大小发生了变化')
					myChart.resize()
				}
      }
  }
}
</script>